
<!-- /PAGE HEADER -->
<!-- FORMS -->
<div class="col-md-12">
	<!-- BOX -->
	<div class="box border green">
		<div class="box-title">
			<h4><i class="fa fa-table"></i>角色列表</h4>
			<div class="tools hidden-xs">
				<a href="#box-config" data-toggle="modal" class="config">
					<i class="fa fa-cog"></i>
				</a>
				<a href="javascript:;" class="reload">
					<i class="fa fa-refresh"></i>
				</a>
				<a href="javascript:;" class="collapse">
					<i class="fa fa-chevron-up"></i>
				</a>
				<a href="javascript:;" class="remove">
					<i class="fa fa-times"></i>
				</a>
			</div>
		</div>
		<form name="forms" action="index.php?admin=1&c=role&a=add" method="post" accept-charset="utf-8">
			<div class="box-body">
				<div id="datatable1_wrapper" class="dataTables_wrapper form-inline" role="grid">
				<div class="row">
				<div class="col-sm-12">
				<div class="pull-right">
					<div class="dataTables_filter" id="datatable1_filter">
						<label>
							<input aria-controls="datatable1" placeholder="Search" class="form-control input-sm" type="text">
						</label>
					</div>
				</div>
				<div class="pull-left">
					<div id="datatable1_length" class="dataTables_length">
						 <input class="btn btn-success" type="button" id="selectAll"  value="全选""/>
						<input class="btn btn-success" type="button" id="reverse"  value="反选" "/>
						<select name="selects" id="sel" size="1" name="datatable1_length" aria-controls="datatable1" class="form-control input-sm" style="font-size: 15px;color:black;" >
							<option selected="selected" id="no">请选择</option>
							<option value="1" id="dele">批量删除</option>
							<option value="2" id="audit">审核通过</option>
							<option value="3" id="noaudit">审核不通过</option>
						</select>
						<input type="submit" onclick="chan()"  name="sel_more" value="提交" class="btn btn-danger">
						<!-- <input id="addbtn" type="button" name="" value="新增数据行+" class="btn btn-success"> -->
					</div>
				</div>
					<div class="clearfix"></div>
					</div>
				</div>
				<table  class="datatable table table-striped table-bordered table-hover dataTable" aria-describedby="datatable1_info" cellspacing="0" cellpadding="0" border="0">
					<thead>
						<tr role="row">
							<th  style="width: 100px;"></th>
							<th style="width: 100px;" class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" >ID</th>
							<th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 150px;" aria-label="Browser: activate to sort column ascending">角色名称
							</th>
							<th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Browser: activate to sort column ascending">权限列表
							</th>
							<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 100px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">状态
							</th>
							<th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 300px;" aria-label="Platform(s): activate to sort column ascending">操作
							</th>

						</tr>
					</thead>

				<tbody role="alert" aria-live="polite" aria-relevant="all" class="tbody">
					<?php foreach($data as $v): ?>
					<tr class="gradeA odd" id="list">
							<td ><input type="checkbox"  name="check[]" value="<?php echo $v['id']?>" /></td>
							<td class="  sorting_1" value="<?php echo $v['id'] ?>"><?php echo $v['id']?></td>
							<td filed="name" class="db_edit"><?php echo $v['name']?></td>
							<!-- <td class="center "><?php echo $v['power']?></td> -->
							<td filedcate="name" class="center hidden-xs catelist" cid="<?php echo $v['power']?>"><?php echo $v['power']?></td>
							<td class="center hidden-xs">
								<button type="button" status="<?php echo $v['status'];?>" class="btn <?php echo ($v['status']==1)?'btn-success':'btn-danger';?>  btn-xs">
									<i class="fa <?php echo ($v['status']==1)?'fa-check':'fa-times';?> "></i>
								</button>
							</td>
							<td class="hidden-xs ">
								<a  href="index.php?&admin=1&c=role&a=edit&id=<?php echo $v['id']?>" class="btn btn-info"><i class="fa fa-pencil-square-o"></i> 编辑</a>
								<a  href="index.php?&admin=1&c=role&a=del&id=<?php echo $v['id']?>" onclick="return confirm('真的要删除吗？')" class="btn btn-danger"><i class="fa fa-trash-o"></i> 删除</a>
							</td>
						</tr>
					<?php endforeach; ?>
					</tbody>
				</table>
						<div class="row">
							<div class="col-sm-12">
								<div class="pull-left">
								   <div class="dataTables_info" id="datatable1_info">Showing 1 to 10 of 57 entries</div>
								</div>
								<div class="pull-right">
									<div class="dataTables_paginate paging_bs_full" id="datatable1_paginate">
										<ul class="pagination">
											<?php echo $pages;?>

										</ul>
									</div>
								</div>
								<div class="clearfix">

								</div>
							</div>
						</div>
					</div>
			</div>
		</form>
	</div>
	<!-- /BOX -->
</div>

<script src="resources/admin/js/jquery/jquery-2.0.3.min.js"></script>
<script  type="text/javascript" >
$(function(){
	//alert(1);
	//绑定点击事件
	//阻止页面重新加载
	//抓取ul标签的类pagination
	//切换页码
		$('.pagination').on('click', 'li', function() {
		//获取a标签的href属性的值
		var url=$(this).find('a').attr('href');
		$.ajax({
			type:'get',
			url:url,
			dataType:'json',
			success:function(json){
			var html='';
			var data=json.data;//字符串要用点.
			for(i in data){
				html+='<tr class="gradeA odd" id="list">';
					html+='<td ><input type="checkbox" name="check[]" value="'+data[i].id+'"</td>';
					html+='<td class="  sorting_1" >'+data[i].id+'</td>';//或者data[i].id可以写成json.data[i].id
					html+='<td filed="title" class="db_edit">'+data[i].name+'</td>';
					html+='<td filedcate="name" class="center hidden-xs catelist" cid="<?php echo $v['power']?>">'+data[i].power+'</td>';

					var cls=(data[i].status==1)?'btn-success':'btn-danger';//状态按钮类
					var icon=(data[i].status==1)?'fa-check':'fa-times';//状态按钮类
					html+='<td class="center hidden-xs">';
						html+='<button status="'+data[i].status+'" class="btn '+cls+' btn-xs"><i class="fa '+icon+' "></i></button>';
					html+='</td>';
					html+='<td class="hidden-xs ">';
						html+='<a  href="index.php?&admin=1&c=role&a=edit&id='+data[i].id+'" class="btn btn-info">';
						html+='<i class="fa fa-pencil-square-o"></i> 编辑</a>';
						html+='<a  href="index.php?&admin=1&c=role&a=del&id='+data[i].id+'>" onclick="return confirm(真的要删除吗？)" class="btn btn-danger">';
						html+='<i class="fa fa-trash-o"></i> 删除</a>';
					html+='</td>';
				html+='</tr>';
			}
			console.log(html);
			$('.tbody').html(html);//替换原来显示的数据
			$('.pagination').html(json.pages);//页码替换
		}
	})
		return false;
	});

	//双击编辑列表数据,dblclick双击
	//$('.db_edit').dblclick(function(event) {
	//抓取'tbody'父级标签，绑定的时候是给子级'.db_edit'绑定
	$('tbody').on('dblclick','td.db_edit',function(event) {
		//查找所有可编辑的td标签是否有input标签
		//console.log($('tbody :text').length);
		var len=$('tbody :text').length;//查找整个列表页面中是否有一个input标签，并获取它的长度
		if(len>0){//判断：大于01这说明整个列表页面有一个input标签
			//先获取之前已经显示的input标签的val值
			var val=$('tbody :text').val();
			//将显示的input标签val值替换掉input标签即可回复成原来未编辑的效果
			//$('tbody :text')抓取已经显示的input标签，然后在该标签的基础上找到他的父级也就是td标签（使用parent()来查找标签的父级）,找到以后将父级的文本替换掉
			$('tbody :text').parent().text(val);//input的parent()父级就是td,然后把td的text()文本给重新的替换掉
		}

	//纯文本用text()即可，但是用html()也可以。为什么用text()而不用val()：因为val()是针对于input标签的，而td是成对标签，成对标签要用text()
	//获取双击编辑的数据
		var txt=$(this).text();//将获取到得内容存储到变量txt中,之前的值
		//console.log(txt);
		var inp='<input type="text" value="'+txt+'"/>';//将获取到的值拼接到input里面
		//console.log(inp);
		//将要编辑的td内容替换成输入框的形式显示
		$(this).html(inp);
		//获取焦点事件
		$('tbody :text').focus();
		//绑定失去焦点事件
		$('tbody :text').blur(function(event) {
			//alert(txt);

			//抓取要修改的数据id
			//var id=$(this).parent().parent().find('td:first').text();
			var id=$(this).parent().parent().find('td:first input').val();
			//console.log($(this).parent().parent().find('td:first').text());
			//获取要修改的字段名
			var filed=$(this).parent().attr('filed');
			//先把数据恢复成原来的状态
			//当input标签失去焦点则获取失去焦点的input标签的val值
			var val=$(this).val();//获取原来输入框的值 ,现在的值


			//找到失去焦点的那个input标签的父级，然后用编辑过的新数据替换掉父级（td)的文本内容，让显示效果回复成原来的状态
			$(this).parent().text(val);//找到失去焦点的那个input标签的父级，把input标签干掉

			//优化点击但不修改之后出现的错误提示
			//判断修改的值和之前的值是否一致
			if (val==txt) {
				return false;
			}
			//input标签无跳转功能，所以不用加return false;
			$.ajax({
				type:'post',
				url:'index.php?c=role&a=edit&admin=1',
				data:{
					//'id','val','filed'为edit.php中$_POST的下标
					'id':id,//修改的数据id
					'val':val,//修改的字段的值
					'filed':filed,//修改的字段名
					'status':'-1'//用来充当区分
				},
				success:function(row){//根据返回受影响行数来提示修改是否成功
					if (parseInt(row)>0) {
						alert('修改成功啦');
					}else{
						alert('修改失败啦');
					}
				}
			})

		});
	});

	//状态事件按钮绑定,点击切换状态值
	//$('td').on('click','btn-xs',function(){
	$('tbody').on('click','button.btn-xs',function(){
		//alert(5);
		//抓取要修改的数据id
		//	    <button> <td>     <tr>
		var id=$(this).parent().parent().find('td:first input').val();
		//根据当前按钮状态
		if ($(this).attr('status')>0) {//通过$(this)获取刚刚点击的按钮的自定义状态属性的值，把判断它是否大于0 0表示不通过
			var status=0;//能进到if说明点击的按钮处于通过状态则把它修改成不通过状态
		}else{
			var status=1;
		}
		//修改botton标签的状态属性值
		$(this).attr('status',status);

		//把当前操作的对象存在临时变量里面,因为在ajax的succes回调函数中$(this)这个指向对象发生了改变.
		var obj=$(this);
		//console.log(status);
		$.ajax({
			type:'post',
			url:'index.php?c=role&a=edit&admin=1',
			data:{
				'id':id,
				'status':status
			},
			success:function(json){
				console.log(json);
				//如果修改成功则修改显示状态
				if(json>0){
					//大于0表示要修改成通过状态
					if(status>0){
						//alert(1);
						//删除原来的状态类
						obj.removeClass('btn-danger');
						//添加新的状态类
						obj.addClass('btn-success');

						//删除原来的图标
						obj.find('i').removeClass('fa-times');
						//添加新的图标
						obj.find('i').addClass('fa-check');
					}else{
						//alert(2);
						//删除原来的状态类
						obj.removeClass('btn-success');
						//添加新的状态类
						obj.addClass('btn-danger');
						//删除原来的图标
						obj.find('i').removeClass('fa-check');
						//添加新的图标
						obj.find('i').addClass('fa-times');
					}
				}

			}
		})
	})
	/*jq实现全选反选*/
	/*全选*/
	$("#selectAll").click(function () {
   		$("input[name='check[]']").prop("checked", true);
	});
	/*反选*/
	$("#reverse").click(function () {
	    $("input[name='check[]']").each(function () {
	        $(this).prop("checked", !$(this).prop("checked"));
	    });
	});
})


</script>


<script type="text/javascript">
	function chan(){//因为批量操作那里也需要提交数据，但是form表单的路径已经固定了，提交批量操作的时候会跳转到form表单提交的路径那里去，因此在提交批量操作的时候要更改其路径
		document.forms.action="index.php?a=list&c=role&admin=1";
		forms.submit();
}

</script>


